<template>
	<header>
		<top-nav v-show="!route.path.includes('admin')" />
		<admin-top-nav v-show="route.path.includes('admin')" />
	</header>
	<main class="w-full h-full">
		<div class="main max-w-[1200px] mx-auto p-3 h-full">
			<nuxt-page />
			<el-backtop :right="30" :bottom="30">
				<div class="text-sm">
					<i class="bi bi-rocket-fill"></i>
				</div>
			</el-backtop>
		</div>
	</main>
	<footer>
		<current-date-time />
	</footer>
</template>

<script name="App" lang="ts" setup>
import 'bootstrap-icons/font/bootstrap-icons.min.css';
import { useSiteConfigStore } from './store/siteConfigStore';

const route = useRoute();

const siteStore = useSiteConfigStore();
await siteStore.getConfig();

useHead({
	title: siteStore.config.title,
	meta: [
		{ name: 'keywords', content: siteStore.config.keywords },
		{ name: 'description', content: siteStore.config.description },
	],
	script: [{ innerHTML: siteStore.config.globalJs }],
	style: [{ innerHTML: siteStore.config.globalCss }],
});

useSeoMeta({
	ogTitle: siteStore.config.title,
	ogDescription: siteStore.config.description,
});
</script>

<style lang="scss">
* {
	font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
}

html,
body {
	width: 100%;
	height: 100%;

	&::-webkit-scrollbar {
		width: 5px;
	}

	&::-webkit-scrollbar-thumb {
		background-color: skyblue;
	}
}

.bi {
	margin: 0;
	padding: 0;
	display: flex;
	align-items: center;
	justify-content: center;
}
</style>
